<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" />
		<view class="text-area">
			<text class="title">{{ controller.state.title }}</text>
		</view>
		<button @click="controller.openPopup">打开弹窗2</button>
		<!--uni-ui 文档 https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge -->
		<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>
		<uni-title type="h1" title="父子组件示例"></uni-title>
		<CustomChild ref="child" title="我是子组件" @click="onClick"></CustomChild>
		<view>store示例：</view>
		<view>{{appStore.counter}}</view>
		<view>双倍：{{appStore.doubleCount}}</view>
		<button @click="appStore.add(1)">+1</button>
		<button @click="appStore.randomizeCounter">随机</button>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CustomChild from '../../components/custom/index.vue'
import Controller from './controller'
import { onLoad } from '@dcloudio/uni-app'
import { useAppStore } from '../../store/app'

/**控制器示例 */
const controller=new Controller()
const popup = ref<any>(null)
controller.popup=popup

/**子组件refs示例 */
const child = ref<InstanceType<typeof CustomChild>|null>(null)

const onClick=(e:string)=>{
	console.log(e)
}
onLoad(()=>{
	setTimeout(() => {
		console.log('从子组件获取的变量：'+child.value?.childData)
		/**调用子组件方法 */
		child.value?.childFunction()
	}, 100);
})

/**store示例 */
const appStore = useAppStore()


</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>
